<template>
  <el-card class="box-card">
    <div class="upload">
      <el-upload
        v-loading="imgUploading"
        class="left"
        name="img"
        :limit="1"
        :action="actionImg"
        :headers="headers"
        :show-file-list="false"
        :before-upload="beforeUploadImg"
        :on-success="successImg"
        :on-exceed="imgExceed"
        drag
        accept=".jpg, .jpeg, .png">
        <el-image v-if="videoForm.coverName" style="width:360px;height:180px" :src="videoForm.coverName | coverUrl"></el-image>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将封面拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过3M</div>
      </el-upload>
      <el-upload
        v-loading="videoUploading"
        element-loading-text="上传中"
        class="right"
        name="video"
        :limit="1"
        :action="actionVideo"
        :headers="headers"
        :show-file-list="false"
        :before-upload="beforeUploadVideo"
        :on-success="successVideo"
        :on-exceed="videoExceed"
        drag
        accept=".mp4">
        <el-image v-if="videoForm.videoName" style="width:360px;height:180px" :src="videoForm.coverName | coverUrl"></el-image>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将视频拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">只能上传mp4文件，且不超过1G</div>
      </el-upload>
    </div>
    <el-form :model="videoForm" status-icon :rules="rules" ref="videoForm">
      <!--视频的表单-->
      <el-form-item prop="title" label="标题">
        <el-input v-model="videoForm.title" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="公开">
        <el-switch v-model="videoForm.isShow"></el-switch>
      </el-form-item>
      <el-form-item prop="content" label="视频简介">
        <el-input type="textarea" v-model="videoForm.content" placeholder="请输入简介" rows="3"></el-input>
      </el-form-item>
      <el-form-item style="text-align: center;">
        <el-button style="width:220px" type="primary" @click="upload('videoForm')">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { uploadCover, uploadVideo } from "@/utils/url";
import {uploadVideoInfo} from "@/api/upload";
import Cookies from 'js-cookie'
import { coverUrl } from "@/utils/url";
export default {
  data() {
    return {
      videoUploading: false,
      imgUploading: false,
      videoForm: {
        title: "",
        coverName: "",
        videoName: "",
        content: "",
        uid: Number,
        isShow: true,
      },
      actionVideo: uploadVideo,
      actionImg: uploadCover,
      headers: {
        Authorization:
          "Bearer " + Cookies.get('token'),
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        content: [{ max: 80, message: "不能超过 80 个字符", trigger: "blur" }],
      },
    };
  },
  methods: {
    beforeUploadImg(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const img1 = testmsg === "jpg";
      const img2 = testmsg === "jpeg";
      const img3 = testmsg === "png";
      const isLt1M = file.size / 1024 / 1024 < 3;
      if (!img1 && !img2 && !img3) {
        this.$message.error("格式只能是jpg/jpeg/png格式!");
        return false;
      }
      if (!isLt1M) {
        this.$message.error("图片大小不能超过 3MB!");
        return false;
      }
      this.imgUploading = true;
      return true;
    },
    successImg(res) {
      this.videoForm.coverName = res.data.img;
      this.imgUploading = false;
      this.$message.success("封面上传成功，请不要重复上传");
    },
    beforeUploadVideo(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const video1 = testmsg === "mp4";
      const isLt1G = file.size / 1024 / 1024 < 1024;
      if (!video1) {
        this.$message.error("格式只能是jpg/jpeg/png格式!");
        return false;
      }
      if (!isLt1G) {
        this.$message.error("图片大小不能超过 1G!");
        return false;
      }
      this.videoUploading = true;
      return true;
    },
    successVideo(res) {
      this.videoForm.videoName = res.data.video;
      this.videoForm.uid = res.data.uid;
      this.videoUploading = false;
      this.$message.success("视频上传成功，请不要重复上传");
    },
    upload(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {         
          uploadVideoInfo(this.videoForm).then((res) => {
            if (res.data.code === 200) {
              this.$message.success("上传成功");
              this.videoForm.title = "";
              this.videoForm.coverName = "";
              this.videoForm.videoName = "";
              this.videoForm.content = "";
              this.videoForm.isShow = true;
            } else {
              this.$message.error("上传失败");
            }
          }).catch((err) => {
            this.$message.error(err.response.data.msg);
          });
        } else {
          this.$message.error("请检查输入的数据");
        }
      });
    },
    //文件个数超出回调
    videoExceed() {
      this.$message.error("只能上传一个视频");
    },
    imgExceed() {
      this.$message.error("只能上传一张封面");
    },
  },
  filters: {
    coverUrl(name) {
      return coverUrl(name);
    },
  },
};
</script>

<style>
.box-card {
  height: 600px;
}

.upload {
  display: flex;
}

.left {
  margin-left: 150px;
}
.right {
  margin-left: 200px;
}

</style>